<template>
<transition name="fade">
  <div class="rec-box">
    <div class="book-header">
      <router-link to="/recipes" tag="i" class="iconfont icon-fanhui"></router-link>
      <h2>营养食谱</h2>
    </div>
    <div class="book-content">
      <div class="left">
        <ul>
          <li @click="show1">阶段
            <ul v-show="see1">
              <router-link v-for="(itee, index) in list1" :key="index" :to="itee.path" tag="li">{{itee.name}}</router-link>
            </ul>
          </li>
          <li @click="show2">功效
            <ul v-show="see2">
              <router-link v-for="(itmm, index) in list2" :key="index" :to="itmm.path" tag="li">{{itmm.name}}</router-link>
            </ul>
          </li>
        </ul>
      </div>
      <router-view></router-view>
    </div>
  </div>
</transition>
</template>
<script>
export default {
  data () {
    return {
      see1: false,
      see2: false,
      list1: [{
        name: '孕期',
        path: '/book/yunqi'
      }, {
        name: '产后',
        path: '/book/chanhou'
      }, {
        name: '婴儿期',
        path: '/book/inbaby'
      }, {
        name: '幼儿期',
        path: '/book/inchild'
      }],
      list2: [{
        name: '五谷',
        path: '/book/Five'
      }, {
        name: '肉蛋类',
        path: '/book/Egg'
      }, {
        name: '海鲜类',
        path: '/book/Seafood'
      }, {
        name: '水果类',
        path: '/book/Fruits'
      }, {
        name: '豆制品',
        path: '/book/Soybean'
      }, {
        name: '坚果类',
        path: '/book/Nut'
      }]
    }
  },
  methods: {
    show1 () {
      this.see1 = true
      this.see2 = false
    },
    show2 () {
      this.see2 = true
      this.see1 = false
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.book-header {
  @include rect(100%, 0.42rem);
  background: rgba(248, 196, 174, 0.849);
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
    color: #6e5757;
  }
}
.book-content {
  @include rect(100%, auto);
  .left {
    float: left;
    width: 0.8rem;
    height: 8rem;
    border-right: 1px solid #cccccc;
    ul {
      width: 0.8rem;
      padding-top: 0.08rem;
      li {
        line-height: 0.25rem;
        margin-left: 0.1rem;
        font-size: 0.16rem;
        color: #ec7310;
        ul {
          padding: 0;
          li {
            font-size: 0.14rem;
            color: #858282;
            width: 0.5rem;
            &.router-link-active {
              color: rgb(253, 167, 130);
            }
          }
        }
      }
    }
  }
}

</style>
